import React from "react";
import * as echarts from 'echarts';
// import axios from 'axios'

class TianQi extends React.Component {
    //钩子函数
    componentDidMount = () => {
        this.myecharts = echarts.init(document.getElementById('echartsTianQi'))
    }
    //获取服务器上的数据
    // axiosTianqi = (cityName) => {
    //     axios.get('https://www.tianqiapi.com/api', {
    //         params: {
    //             appid: 23035354,
    //             appsecret: '8YvlPNrz',
    //             version: 'v9',
    //             cityid: 0,
    //             city: cityName,
    //             ip: 0,
    //             callback: 0
    //         }
    //     })
    //         .then(response => {
    //             let dataArray = response.data.data
    //             // console.log(response.data);
    //             //未来一周的周期
    //             let week = []
    //             //未来一周的最高温度
    //             let highest = []
    //             //未来一周的最低温度
    //             let lowest = []

    //             for (let i = 0; i < dataArray.length; i++) {
    //                 let obj = dataArray[i]
    //                 week[i] = obj.week
    //                 highest[i] = obj.tem1
    //                 lowest[i] = obj.tem2
    //             }
    //             this.showTianQi(week, highest, lowest, cityName)
    //         })
    //         .catch(error => {
    //             console.log(error);
    //         });
    // }

    //新版本的：在参数、状态，值发生变化后触发的（有2个参数）
    // shouldComponentUpdate(nextProps, nextState) {
    //     // nextProps, nextState两者表示当前最新的值
    //     // 而通过state和props获取的值是上一次的值
    //      return true/fasle
    //  }

    shouldComponentUpdate = (nextProps, nextStata) => {
        let { week, highest, lowest } = nextProps.dataLine
        this.showTianQi(week, highest, lowest)
        return true
    }

    //绘制echarts图形
    showTianQi = (week, highest, lowest) => {
        // showTianQi = () => {
        let option = {
            title: {
                // text: `未来一周${cityName}的天气`
                text: `温度`,
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                textStyle: {
                    color: '#fff'
                }
            },
            // toolbox: {
            //     show: true,
            //     feature: {
            //         dataZoom: {
            //             yAxisIndex: 'none'
            //         },
            //         dataView: { readOnly: false },
            //         magicType: { type: ['line', 'bar', 'stack'] },
            //         restore: {},
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: week,
                axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C',
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',
                    data: highest,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '最低温度',
                    type: 'line',
                    data: lowest,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                }
            ]
        }
        this.myecharts.setOption(option)
    }

    //当下拉框的值发生变化时触发的事件
    // hanederChange = (e) => {
    //     // console.log(e.target.value)
    //     this.axiosTianqi(e.target.value)
    // }

    render() {
        return (
            <div>
                {/* <select onChange={this.hanederChange}>
                    <option value='太原'>太原</option>
                    <option value='大同'>大同</option>
                    <option value='运城'>运城</option>
                    <option value='临汾'>临汾</option>
                </select> */}
                <div id="echartsTianQi" className="temperature"></div>
            </div >
        )
    }
}
export default TianQi